<template>
  <div class="left">
    <el-row :gutter="25">
      <el-col :span="10">

      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="findcarplace()" >查询停车位息</el-button>

      </el-col>

      <el-table :visible.sync="editDialogVisible" :data="placelist"  style="hight: 200px"
                border stripe>
        <el-table-column type="index" ></el-table-column>
        <el-table-column label="停车位" prop="name"></el-table-column>
        <el-table-column label="车牌号" prop="carnumber"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button v-if="scope.row.carnumber==null" type="primary"  size="mini" @click="yuding(scope.row.name)">VIP预定</el-button>
            <!-- 删除 -->


          </template>
        </el-table-column>
      </el-table>

    </el-row>
  </div>
</template>

<script>
  export default {
    created (){
      // this.getUserList();
      // this.getmeanList();
      //this.activePath = window.sessionStorage.getItem('activePath')
    },
    data(){


      return{
        //查询信息实体
        queryInfo:{
          query:"",//查询信息
          pageNum: 1,//当前页
          pageSize: 5,//每页最大数
        },
        cz:this.$route.query.username,
        user:[],
        placelist:[],
        meanlistqian:[],
        userlist:[],//用户列表
        total:0,//总记录数
        // 控制修改用户对话框显示/隐藏
        editDialogVisible:false,
        addDialogVisible: false,
        // 被激活的连接
        activePath: '/userqian',
        // 添加用户表单项
        addForm: {
          username:'',
          password:'',

          carnumber:'',
        },


        // 修改用户信息
        editForm:{},
        // 验证规则
        addFormRules:{
          // 添加用户表单验证规则
          username:[
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
          ],
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules:{
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
      }

    },
    methods:{

      async getCarList() {
        // 调用post请求
        const { data: res } = await this.$http.get("carlist", {

        });
        this.carlist = res.data; // 将返回数据赋值
        // this.total = res.numbers; // 总个数
        // console.log(queryInfo);



      },
async ydcw(){

  const { data: res } = await this.$http.post(
    `ydcw?carnumber=${this.$route.query.carnumber}`
  );
},
      async pdif(){

        const { data: res } = await this.$http.post(
          `ydcw?carnumber=${this.$route.query.carnumber}`
        );
      },



      async yuding(name){

        const { data: res } = await this.$http.post(`pdif?carnumber=${this.$route.query.carnumber}`);//判断是否已经停车
        if (res != "success") {
          this.$message.error("已经预定或已经停车");

          return this.$message.error("已经预定或已经停车");
        }



        const { data: res3 } = await this.$http.post(`pdsf?carnumber=${this.$route.query.carnumber}`);//判断身份
        if (res3 != "success") {
          this.$message.error("请充值");
          this.$router.push({ path: "/login"});

          return this.$message.error("请充值");
        }
        else{


        this.$message.success("预定成功！！！");
        // this.$message.success(this.$route.query.carnumber);
        const { data: res2 } = await this.$http.post(//开始预定
          `ydcw?carnumber=${this.$route.query.carnumber}&name=${name}`
        );}
        // this.$message.success(res2.data());
        //
        // res2.data.forEach(item => {
        //   this.$message.info(item.role);
        //   if (item.role=="VIP") {
        //
        //     this.$message.info("VIP用户你好");
        //     // this.ydcw();
        //
        //
        //
        //
        //   } else {
        //     this.$message.info("请先成为VIP用户");
        //     this.$router.push({ path: "/login"});
        //   }


        // })










        // if(res.data!='VIP用户'){
        //   return this.$message.info("请先成为VIP用户");
        // }
        // else{
        //   return this.$message.info("VIP用户你好");
        // }


        //this.$router.push({ path: "/yudingqian",query:{username:this.$route.query.username}});
        // this.$message.success(res.data);${this.$route.query.username}
        // this.$router.push({ path: "/firstmain",query:{username:res.user}});



      },
      async findcarplace(){

        const { data: res } = await this.$http.post(
          `findcarplace`
        );
        this.placelist=res.data;

        //this.$router.push({ path: "/yudingqian",query:{username:this.$route.query.username}});
        // this.$message.success(res.data);
        // this.$router.push({ path: "/firstmain",query:{username:res.user}});



      },



    }

  }
</script>

<style scoped>
  .el-tag{
    font-size: 30px;

  }
  .right{
    background-color: #B3C0D1;
    width: 300px;
    height: 400px;
    position: absolute;
    left: 800px;
    float: left;
    text-align: center;
    font-size: 40px;
    color: blanchedalmond;
    background: url("../assets/11.png") no-repeat;

  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .left{
    background-color: #B3C0D1;
    width: 900px;
    height: 800px;
    position: absolute;
    left: 100px;
  }

  .el-header, .el-footer {
    height: 200px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    height: 600px;
  }
  .el-gg{

    background-color: #B3C0D1;

  }


</style>
